
import { Tooltip } from 'antd'
import extensionDesc from '@/assets/image/screenshot/extension-zh.png';
import debugBaidu from '@/assets/image/screenshot/debug-baidu.png';

## 在线体验#online

> 点击查看完整代码: [Codesandbox](https://codesandbox.io/p/sandbox/page-spy-with-react-k3pzzt)

<iframe
  width="100%"
  src="https://codesandbox.io/embed/k3pzzt?view=editor+%2B+preview&module=%2Fpublic%2Findex.html"
  title="page-spy-with-react"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

## 接入使用#usage

### 通过 script 引入#script-usage

#### 第一步#script-usage-step-1

在客户端的项目中加载 `<script>`:

```html
<!-- PageSpy SDK -->
<script crossorigin="anonymous" src="{deployUrl}/page-spy/index.min.js"></script>

<!-- 插件（非必须，但建议使用） -->
<script crossorigin="anonymous" src="{deployUrl}/plugin/data-harbor/index.min.js"></script>
<script crossorigin="anonymous" src="{deployUrl}/plugin/rrweb/index.min.js"></script>
```

#### 第二步#script-usage-step-2

初始化 PageSpy 和插件，可通过 [配置项]({VITE_SDK_BROWSER_REPO}) 自定义 SDK 的行为：

<blockquote>
  <details>
    <summary>引入的插件提供了哪些功能？</summary>
    <div>
      [DataHarborPlugin]({VITE_PLUGIN_DATA_HARBOR}) 和 [RRWebPlugin]({VITE_PLUGIN_RRWEB}) 两个插件，主要用于扩展 PageSpy 的能力：
      - **DataHarborPlugin**：PageSpy 本身仅支持在线模式，即调试期间客户端和调试端必须同时在线。DataHarborPlugin 让 PageSpy 实现了离线模式的调试，点击 [离线日志回放](./offline-log) 查看更多详细信息。
      - **RRWebPlugin**：记录用户操作轨迹，底层使用 [rrweb](https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md)。通常和 DataHarborPlugin 绑定在一起使用。

      你也可以通过 [开发插件](./plugins)，定制属于你自己的 PageSpy！
    </div>
  </details>
</blockquote>

```html
<script>
  window.$harbor = new DataHarborPlugin();
  window.$rrweb = new RRWebPlugin();

  [window.$harbor, window.$rrweb].forEach(p => {
    PageSpy.registerPlugin(p)
  })

  window.$pageSpy = new PageSpy();
</script>
```

### 通过 ESM 引入#esm-usage

#### 第一步#esm-usage-step-1

:::code-group

```bash yarn
yarn add @huolala-tech/page-spy-browser @huolala-tech/page-spy-plugin-data-harbor @huolala-tech/page-spy-plugin-rrweb
```

```bash npm
npm install @huolala-tech/page-spy-browser @huolala-tech/page-spy-plugin-data-harbor @huolala-tech/page-spy-plugin-rrweb
```

:::

#### 第二步#esm-usage-step-2

```js
import PageSpy from '@huolala-tech/page-spy-browser';
import DataHarborPlugin from '@huolala-tech/page-spy-plugin-data-harbor';
import RRWebPlugin from '@huolala-tech/page-spy-plugin-rrweb';

window.$harbor = new DataHarborPlugin();
window.$rrweb = new RRWebPlugin();

[window.$harbor, window.$rrweb].forEach(p => {
  PageSpy.registerPlugin(p);
})

// ESM 模式下无法自动分析部署地址，因此必须手动配置以下参数
window.$pageSpy = new PageSpy({
  api: "{deployPath}",
  clientOrigin: "{deployUrl}",
  enableSSL: {enableSSL},
});
```

以上就是在浏览器项目中接入 PageSpy 的全部流程，接入完成后点击顶部菜单 <Tooltip title="菜单默认隐藏，部署后可见" color="purple"><a href="javascript:void(0)">开始调试</a></Tooltip> 使用！

## 在框架中集成#framework

PageSpy 在 CodeSandbox 平台发布了与主流框架的接入指南，你可以前往在线体验：

- **React**：[CodeSandbox - PageSpy in React](https://codesandbox.io/p/sandbox/page-spy-with-react-k3pzzt)
- **Vue**：[CodeSandbox - PageSpy in Vue](https://codesandbox.io/p/sandbox/page-spy-with-vue-ft35qs)
- **Svelte**：[CodeSandbox - PageSpy in Svelte](https://codesandbox.io/p/sandbox/page-spy-with-svelte-p6mxd6)
- **Angular**：[CodeSandbox - PageSpy in Angular](https://codesandbox.io/p/sandbox/page-spy-with-angular-6wg3ps)
- **Nextjs**：[CodeSandbox - PageSpy in Nextjs](https://codesandbox.io/p/sandbox/page-spy-with-nextjs-5htxv5)
- **Nuxtjs**：[CodeSandbox - PageSpy in Nuxtjs](https://codesandbox.io/p/sandbox/page-spy-with-nuxtjs-8znq22)

## 使用浏览器插件#extension

PageSpy 提供浏览器插件，让你无需集成任何代码，即可在任何网页上使用 PageSpy！

是的，你没看错！通过 PageSpy 的浏览器插件你可以调试几乎所有网页！（少数设置了 CSP 策略的网站可能无法生效）

### 安装#install-extension

- 前往 [Chrome 应用商店](https://chromewebstore.google.com/detail/pagespy/kpfigmbgeedkgnjnlpilghiffepahlmk) 一键安装，或者：
- 前往 [浏览器插件](https://github.com/HuolalaTech/page-spy-extension/tree/main/packages/online-pagespy-extension) 仓库，按照 README 文档手动安装。

### 面板参数#extension-panel

<a href={extensionDesc} target="_blank">
  <img src={extensionDesc} />
</a>

<blockquote>
  <details>
    <summary>参考示例：调试百度</summary>
    <a href={debugBaidu} target="_blank">
      <img src={debugBaidu} />
    </a>
  </details>
</blockquote>